<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { mdiClose, mdiWechat, mdiPlay } from '@mdi/js'
import { genQr, userVerificationCodeLogin } from '@/api/user'
import { isValidPhoneNumber } from '@/utils/CommonUtil'
import { showAlert } from '@/utils/ComponentRegister'
import { logo } from '@/assets/data_image'

const token = localStorage.getItem('yzxToken')
const loginDialog = ref()

const qr = ref()
const initHome = () => {
  if (!token) {
    loginDialog.value.showModal()
    genQr('黑斯特手写').then((res) => {
      qr.value = res
    })
  }
}
onMounted(() => {
  initHome()
})

const closeDialog = () => {
  loginDialog.value.close()
}

const userLoginBo = reactive({ phoneNo: '', code: '' })
const readme = ref()
const checked = ref(false)
const checkedChange = () => {
  checked.value = !checked.value
}

const userLogin = (event) => {
  event.preventDefault()

  if (!checked.value) {
    readme.value.classList.add('radio_error')
    setTimeout(() => {
      readme.value.classList.remove('radio_error')
    }, 1000)
    return
  }
  if (!isValidPhoneNumber(userLoginBo.phoneNo)) {
    showAlert('手机号有误，请重新输入', 'error')
    return
  }
  const temp = JSON.parse(JSON.stringify(userLoginBo))
  temp.phoneNo = `+86${temp.phoneNo}`
  userVerificationCodeLogin(temp).then((res: any) => {
    if (res) {
      localStorage.setItem('yzxToken', res)
      closeDialog()
    }
  })
}
</script>

<template>
  <dialog ref="loginDialog" class="modal">
    <div class="modal-box p-0 max-w-4xl" style="min-width: 56rem">
      <form method="dialog">
        <svg-icon
          class="absolute right-2 top-2"
          type="mdi"
          @click="closeDialog"
          :path="mdiClose"
        ></svg-icon>
      </form>

      <main class="grid grid-rows-1 grid-cols-2">
        <section
          class="mt-8 mb-8 flex flex-col items-center col-span-1 border-r border-solid border-gray-300 p-6 gap-y-4"
        >
          <h3 class="text-lg font-bold text-primary-content">
            <span class="bg-primary rounded-2xl p-3">
              登录后推荐更懂你的笔记
            </span>
          </h3>

          <img class="mt-2 h-8" :src="logo" alt="logo" />

          <div id="qrContainer" class="flex flex-col items-center gap-y-4">
            <img :src="qr" width="128" alt="二维码" />

            <p class="flex flex-row">
              可用&nbsp;
              <img height="20" width="20" :src="logo" alt="" />
              &nbsp;
              <span class="font-bold">小红书</span>
              &nbsp; 或&nbsp;
              <svg-icon type="mdi" :path="mdiWechat"></svg-icon>
              &nbsp;
              <span class="font-bold">微信</span>
              &nbsp; 扫码登录
            </p>
          </div>
          <p class="flex flex-row">
            <svg-icon type="mdi" :path="mdiPlay"></svg-icon>
            小红书如何扫码
          </p>
        </section>

        <section class="mt-8 mb-8 col-span-1">
          <h3 class="mt-4 text-center text-lg font-bold text-primary-content">
            <span class="p-2">手机号登录</span>
          </h3>

          <form class="mt-8 flex flex-col justify-center items-center">
            <label class="input w-4/5 input-bordered flex items-center gap-2">
              <span class="text-gray-500">+86</span>
              <input
                v-model="userLoginBo.phoneNo"
                placeholder="请输入手机号"
                type="text"
                class="caret-pink-400"
              />
            </label>

            <label
              class="mt-4 input w-4/5 input-bordered flex items-center gap-2"
            >
              <input
                v-model="userLoginBo.code"
                placeholder="请输入手机号"
                type="text"
                class="caret-pink-400"
              />
              <span class="text-pink-300">获取验证码</span>
            </label>

            <label
              class="mt-4 btn text-white w-4/5"
              style="background-color: #ff2442"
            >
              <button class="p-4" @click="userLogin">登录</button>
            </label>
          </form>

          <div class="mt-4 flex flex-row items-center justify-center text-xs">
            <p class="w-4/5 flex flex-row items-center justify-center gap-2">
              <input
                ref="readme"
                @click="checkedChange"
                type="radio"
                :checked="checked"
                class="radio square size-4"
              />
              <span>
                我已阅读并同意
                <span class="text-blue-500 cursor-pointer">《用户协议》</span>
                <span class="text-blue-500 cursor-pointer">《隐私政策》</span>
                <span class="text-blue-500 cursor-pointer">
                  《儿童/青少年个人信息保护规则》
                </span>
              </span>
            </p>
          </div>

          <p class="text-sm text-gray-500 text-center mt-4">
            <span>新用户可直接登录</span>
          </p>
        </section>
      </main>
    </div>
  </dialog>
</template>

<style scoped>
.radio_error {
  animation: shake 0.5s;
  animation-iteration-count: 1;
  border-color: red;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
</style>
